<div class="plus-admin-card">
    <div class="plus-admin-card-tool columns">
        <div class="column col-3">
            <a class="layui-btn primary"><i class="layui-icon-add"></i>增加</a>
            <a class="layui-btn dashed danger"><i class="layui-icon-delete"></i>删除</a>
        </div>
        <div class="column col-3 col-ml-auto">
            <form class="layui-form" action="">
                <div class="input-action">
                    <input class="layui-input" type="text" value="" placeholder="请输入搜索内容">
                    <a class="layui-btn simple primary action-button">
                        <i class="layui-icon-search"></i>搜索
                    </a>
                </div>
            </form>
        </div>
    </div>
    <div class="plus-admin-card-tab">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">页签一</li>
                <li class="">页签二</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="demo"></table>
                </div>
                <div class="layui-tab-item">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                            <tr>
                                <th>昵称</th>
                                <th>加入时间</th>
                                <th>签名</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>李煜</td>
                                <td>2016-11-29</td>
                                <td>人生就像是一场修行</td>
                            </tr>
                            <tr>
                                <td>王维</td>
                                <td>2016-11-28</td>
                                <td>醉意是江南…</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script>

    var insTb = fast.initTable({
        elem: 'demo'
        , cols: [[ //标题栏
            { type: 'checkbox', fixed: 'left' }
            , { type: 'numbers', fixed: 'left', title: '序' }
            , { field: 'id', title: 'ID', width: 80, sort: true }
            , { field: 'username', title: '用户名', width: 120 }
            , { field: 'email', title: '邮箱', minWidth: 150 }
            , { field: 'sign', title: '签名', minWidth: 160 }
            , { field: 'sex', title: '性别', width: 80 }
            , { field: 'city', title: '城市', width: 100 }
            , { field: 'experience', title: '积分', width: 80, sort: true }
        ]]
        , data: [{
            "id": "10001"
            , "username": "杜甫"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "116"
            , "ip": "192.168.0.8"
            , "logins": "108"
            , "joinTime": "2016-10-14"
        }, {
            "id": "10002"
            , "username": "李白"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "12"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
            , "LAY_CHECKED": true
        }, {
            "id": "10003"
            , "username": "王勃"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "65"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
        }, {
            "id": "10004"
            , "username": "贤心"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "666"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
        }, {
            "id": "10005"
            , "username": "贤心"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "86"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
        }, {
            "id": "10006"
            , "username": "贤心"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "12"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
        }, {
            "id": "10007"
            , "username": "贤心"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "16"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
        }, {
            "id": "10008"
            , "username": "贤心"
            , "email": "test@email.com"
            , "sex": "男"
            , "city": "浙江杭州"
            , "sign": "人生恰似一场修行"
            , "experience": "106"
            , "ip": "192.168.0.8"
            , "logins": "106"
            , "joinTime": "2016-10-14"
        }]
        //,skin: 'line' //表格风格
        , even: true
        //,page: true //是否显示分页
        //,limits: [5, 7, 10]
        //,limit: 5 //每页默认显示的数量
    });
</script>